@keyframes fx-animation-drawer-left-enter {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fx-animation-drawer-left-leave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes fx-animation-drawer-right-enter {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fx-animation-drawer-right-leave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fx-animation-drawer-top-enter {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fx-animation-drawer-top-leave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes fx-animation-drawer-bottom-enter {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fx-animation-drawer-bottom-leave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.fx-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  &.left {
    > .fx-drawer-inner {
      left: 0;
      top: 0;
      bottom: 0;
      animation: fx-animation-drawer-left-enter 0.3s;
    }

    &.drawer-leave {
      > .fx-drawer-inner {
        animation: fx-animation-drawer-left-leave 0.3s forwards;
      }

      > .fx-drawer-modal {
        animation: modal-leave 0.3s forwards;
      }
    }
  }

  &.right {
    > .fx-drawer-inner {
      right: 0;
      top: 0;
      bottom: 0;
      animation: fx-animation-drawer-right-enter 0.3s;
    }

    &.drawer-leave {
      > .fx-drawer-inner {
        animation: fx-animation-drawer-right-leave 0.3s forwards;
      }

      > .fx-drawer-modal {
        animation: modal-leave 0.3s forwards;
      }
    }
  }

  &.top {
    > .fx-drawer-inner {
      top: 0;
      left: 0;
      right: 0;
      animation: fx-animation-drawer-top-enter 0.3s;
    }

    &.drawer-leave {
      > .fx-drawer-inner {
        animation: fx-animation-drawer-top-leave 0.3s forwards;
      }

      > .fx-drawer-modal {
        animation: modal-leave 0.3s forwards;
      }
    }
  }

  &.bottom {
    > .fx-drawer-inner {
      bottom: 0;
      left: 0;
      right: 0;
      animation: fx-animation-drawer-bottom-enter 0.3s;
    }

    &.drawer-leave {
      > .fx-drawer-inner {
        animation: fx-animation-drawer-bottom-leave 0.3s forwards;
      }

      > .fx-drawer-modal {
        animation: modal-leave 0.3s forwards;
      }
    }
  }

  > .fx-drawer-inner {
    padding: 15px;
    position: absolute;
    z-index: 10;
    background-color: $drawer-background;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);

    > .fx-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $height-default;
      color: $font-color-important;

      > .fx-drawer-title {
        width: calc(100% - 12px);
      }

      > .fx-drawer-close {
        cursor: pointer;
        text-align: center;
        width: 12px;
        height: 12px;
        line-height: 12px;
      }
    }
  }

  > .fx-drawer-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    animation: modal-enter 0.3s;
  }
}
